import React from 'react'
import {
    ActivityIndicator,
    KeyboardAvoidingView, Modal,
    Text,
    TextInput,
    TouchableOpacity,
    View,
    Picker,
    Slider,
} from "react-native";
import Style from "../../common/style";

import Title from "../component/title";

export default class ComponentPage extends React.Component {

    state = {
        modalVisible: false,
        pickerValue:'',
        sliderValue:30,
    };

    render() {
        return (
            <View style={Style.page}>
                <Title title='Component'/>

                <View style={StyleSheet.content}>

                    <Text style={StyleSheet.groupTitleText}>ActivityIndicator</Text>
                    <View style={StyleSheet.row}>
                        <ActivityIndicator size='large' color="#000000"/>
                        <ActivityIndicator size='small' color="#FF0000"/>
                    </View>

                    <Text style={StyleSheet.groupTitleText}>Slider</Text>
                    <Text>value:{this.state.sliderValue}</Text>
                    <Slider maximumValue={100} step={1} value={30} onValueChange={(value)=>this.setState({sliderValue:value})} />

                    <Text style={StyleSheet.groupTitleText}>Picker</Text>
                    <Picker selectedValue={this.state.pickerValue}
                            mode='dropdown'
                    onValueChange={((itemValue, itemPosition) => this.setState({pickerValue:itemValue}))}>
                        <Picker.Item label='java' value='java'/>
                        <Picker.Item label='c#' value='c#'/>
                        <Picker.Item label='JavaScript' value='js#'/>
                    </Picker>

                    <Text style={StyleSheet.groupTitleText}>Modal</Text>
                    <Modal animationType='fade' transparent={false}
                           visible={this.state.modalVisible}
                           onRequestClose={() => this.setState({modalVisible: false})}
                           hardwareAccelerated={true}
                           presentationStyle="formSheet">
                        <Title title='this is modal'/>
                        <TouchableOpacity style={Style.button} onPress={
                            () => this.setState({modalVisible: false})
                        }>
                            <Text>隐藏</Text>
                        </TouchableOpacity>
                    </Modal>
                    <TouchableOpacity style={Style.button} onPress={
                        () => this.setState({modalVisible: true})
                    }>
                        <Text>显示Modal</Text>
                    </TouchableOpacity>

                    <Text style={StyleSheet.groupTitleText}>KeyboardAvoidingView</Text>
                    <KeyboardAvoidingView>
                        <TextInput style={Style.input}  placeholder='please input' clearButtonMode='always' keyboardType='numeric'/>
                    </KeyboardAvoidingView>
                </View>

            </View>
        )
    }
}

const StyleSheet = {
    groupTitleText:{
        color:"#000",
        fontWeight:'800',
    },

    content: {
        paddingLeft: 15,
        paddingRight: 15,
    },
    row: {
        padding: 8,
        width: 'auto',
        flexDirection: 'row'
    }

};
